<template>
  <div>
    <!-- 面包屑 -->
    <Breadcrumb></Breadcrumb>
  <div class="header">
         <div class="form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="产品名称">
            <el-input v-model="formInline.name"  size="small" placeholder="产品名称" @blur="blur"></el-input>
          </el-form-item>
          <el-form-item label="添加时间">
            <el-date-picker v-model="formInline.date" size="small" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="group">
        <el-button size="small" type="warning" icon="el-icon-plus" @click="toProductPage">添加商品</el-button>
        <el-button size="small" type="danger" icon="el-icon-delete" @click="deleteAll">批量删除</el-button>
      </div>
  </div>
  <div class="content">
       <el-table
      :data="tableData"
      style="width: 100%" stripe border header-cell-class-name="active-header" cell-class-name="table-center" @select="selectHandle" @select-all="selectHandle">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="商品编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="title"
        label="商品名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="price"
        label="商品价格"
        width="120">
      </el-table-column>
      <el-table-column
        prop="category"
        label="商品类目"
        width="120">
      </el-table-column>
       <el-table-column  prop="create_time" label="添加时间" width="200">
        <template slot-scope="scope">
            <span>{{ moment(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
      </el-table-column>
       <el-table-column
        prop="sellPoint"
        label="商品卖点"
        width="120" >
      </el-table-column>
      <el-table-column prop="descs" label="商品描述" show-overflow-tooltip>
         <template slot-scope="scope">
           <span>{{ removeHTMLTag(scope.row.descs) }}</span>
          </template>
      </el-table-column>
   
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="small" type="warning" icon="el-icon-edit" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
        <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index,scope.row)" >删除</el-button>
      </template>
    </el-table-column> 
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination">
      <Pagination :total="total" :pageSize="pageSize" @CurrentChange="CurrentChange"></Pagination>
      </div>
    
  </div>
  </div>
</template>

<script>
import moment from 'moment'
import Pagination from '@/components/pagination/Pagination.vue'
import { removeHTMLTag } from '@/utils/common.js'
import { mapMutations } from 'vuex'
export default {
  components:{
      Pagination
   
  },
      data() {
          return {
              formInline: {
              name: '',
              date: ''
              },
              tableData: [],
              total:10,
              pageSize:1,
              current:1,
              ids:[]
              }
      },
      created() {
        this.projectList();
      },
      methods: {
        moment,
        removeHTMLTag,
        ...mapMutations('product',['changeRowData','changeTitle']),
        deleteAll(){
            console.log('ids',this.ids);
            let idStr = this.ids.join(',')
            console.log(idStr);
             this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        this.$api.batchDelete({ids:idStr})
        .then(res=>{
          console.log(res.data);
            if(res.data.status===200){
              this.$message({
            type: 'info',
            message: '删除成功'
          });  
           //获取当前是否是最后一页的数据操作-----------
              //获取当前的数据可以展示多少页码  16/8=2   17/8=3  --- 最大的页码数
              let maxPage = Math.ceil(this.total/this.pageSize);
              console.log('最大的页码数--',maxPage);
              //获取选中的个数--- 
              let len = this.ids.length;
              console.log('选中的个数--- ',len);
              //分析：批量删除的时候 删的位置最后一页的数据  再去比较删除的个数与最后一页的条数比较  
              //删除个数==最后一页的条数 选中高亮的页码-1 请求页码数据也就是高亮页码
              if(maxPage == this.current){//最后一页的批量删除操作
                  //最后一页的数据条数---------------
                 let num = this.total%this.pageSize ==0?this.pageSize:this.total%this.pageSize;
                 console.log('最后一页的数据条数---',num);
                 if(num===len){
                    this.current = this.current-1 >0?this.current-1:1;
                 }
              }
              //删除成功
              this.projectList(this.current)
            }
        })
            
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
           
        },
        selectHandle(selection){
            console.log('selection' ,selection);
            let arr=[]
            selection.forEach(ele=>{
                  arr.push(ele.id)
            })
            this.ids=arr;
        },
        // 添加商品
        toProductPage(){
            console.log("添加到跳转页面");
            this.changeTitle('添加')
            this.$router.push('/product/product-page')
        },
        onSubmit() {
         console.log('submit!', this.formInline.name);
         this.search(this.formInline.name)
      
        },
        CurrentChange(val){
          this.current=val
              this.projectList(val)
        },
        //编辑操作按钮
     handleEdit(index, row) {
        console.log(index, row);
        this.changeRowData(row)
        this.changeTitle('编辑')
        this.$router.push('/product/product-page')
      },
      // 删除操作
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        this.deleteItemById(row.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 失去焦点
      blur(){
          if(!this.formInline.name){
              this.projectList(1)
          }
      },
      //获取产品列表
      async projectList(page){
        let res = await this.$api.projectList({page})
        console.log('产品表数据',res.data);
        this.tableData=res.data.data
        this.total = res.data.total
      this.pageSize = res.data.pageSize;
      },
      // 搜索接口
      async search(search){
        let res  = await this.$api.search({search})
        console.log(res.data);
        if(res.data.status===200){
          this.tableData = res.data.result;
           this.total = res.data.result.length
          this.pageSize = res.data.result.length
        }else{ //查无数据
          this.tableData=[]
           this.total = 1;
          this.pageSize = 1
        }
      },
      // 删除接口
      async deleteItemById(id){
        let res = await this.$api.deleteItemById({id})
        console.log(res.data);
        if(res.data.status===200){
          this.$message({
            type:'success',
            message:"删除成功"
          })

        }
          //删除视图---如果当前是最后一页的最后一条数据-删除后--获取上一页的数据 
        //判断 this.total总数目   
        if (this.total % this.pageSize === 1) {
          this.current = this.current - 1 > 0 ? this.current - 1 : 1;//最好>1 
        }
        this.projectList(this.current)
      }
      },
}
</script>

<style lang="less" scoped>
.header{
  background: #fff;
  margin-bottom: 20px;
  padding: 10px;
  .el-form-item {
    margin-bottom: 16px;
  }
   .group {
    border: 1px solid #eee;
    padding: 8px;
  }
}
.content{
   background: #fff;
   /deep/ .active-header {
    color: #333;
    text-align: center;
  }

  /deep/ .table-center {
    text-align: center;
  }

  .pagination {
    padding: 10px;
  }
}
    
</style>